import '../../style/outSignV2.less';
import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Tools, Icon, Tabs} from 'weaver-mobile';
import SignContainer from './main';
import RecordContainer from './record';
import SignRouteLayout from './sign';
import LocationList from './locationList';
const getLabel = Tools.getLabel;

const generateBtn = props => {
  return (
      <div className='btnItem'>
          <div className='btnIcon'>
              <Icon type={props.icon}/>
          </div>
          <div className='btnLabel'>{props.label}</div>
      </div>
  )
}

@inject('outSignStoreV2')
@withRouter
@observer
export default class Sign extends Component {
  componentDidMount(){
    document.title = getLabel('500503','外勤打卡');
  }

  render() {
    const {outSignStoreV2: store} = this.props;
    const {
      initialPage,
      signLayoutStore,
      locationsLayoutStore
    } = store;

    const tabs = [ 
      { title: generateBtn({label: getLabel('500503','外勤打卡'), icon: 'position'}) },
      { title: generateBtn({label: getLabel('16886','打卡记录'), icon: 'calendar'}) }
    ];

    return (
      <div className='outSignContainerV2'>
        <Tabs tabs={tabs}
          page={initialPage}
          swipeable={false}
          tabBarPosition='bottom'
          onChange={(tab, index) => store.initialPage = index}
        >
          <SignContainer store={store}/>
          <RecordContainer store={store} />
        </Tabs>
        
        {/* 附近位置路由 */}
        <Route key={locationsLayoutStore.id} path={locationsLayoutStore.path} render={() => <LocationList />} />
        {/* 外勤打卡填写路由 */}
        <Route key={signLayoutStore.id} path={signLayoutStore.path} render={() => <SignRouteLayout store={store}/>} />
      </div>
    )
  }
}